<template>
  <div class="system-settings">
    <div class="page-header">
      <h2>系统设置</h2>
    </div>
    
    <el-card class="settings-card">
      <el-tabs v-model="activeTab" type="border-card">
        <!-- 基本设置 -->
        <el-tab-pane label="基本设置" name="basic">
          <el-form :model="basicSettings" label-width="120px" class="settings-form">
            <el-form-item label="系统名称">
              <el-input v-model="basicSettings.systemName" placeholder="请输入系统名称" />
            </el-form-item>
            
            <el-form-item label="系统描述">
              <el-input 
                v-model="basicSettings.systemDescription" 
                type="textarea" 
                :rows="3"
                placeholder="请输入系统描述"
              />
            </el-form-item>
            
            <el-form-item label="系统状态">
              <el-switch 
                v-model="basicSettings.systemStatus" 
                active-text="运行中" 
                inactive-text="维护中"
              />
            </el-form-item>
            
            <el-form-item label="维护公告">
              <el-input 
                v-model="basicSettings.maintenanceNotice" 
                type="textarea" 
                :rows="3"
                placeholder="系统维护时显示的公告内容"
              />
            </el-form-item>
            
            <el-form-item label="客服电话">
              <el-input v-model="basicSettings.servicePhone" placeholder="请输入客服电话" />
            </el-form-item>
            
            <el-form-item label="客服邮箱">
              <el-input v-model="basicSettings.serviceEmail" placeholder="请输入客服邮箱" />
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveBasicSettings">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 邮件设置 -->
        <el-tab-pane label="邮件设置" name="email">
          <el-form :model="emailSettings" label-width="120px" class="settings-form">
            <el-form-item label="SMTP服务器">
              <el-input v-model="emailSettings.smtpHost" placeholder="请输入SMTP服务器地址" />
            </el-form-item>
            
            <el-form-item label="SMTP端口">
              <el-input v-model="emailSettings.smtpPort" placeholder="请输入端口号" />
            </el-form-item>
            
            <el-form-item label="发件人邮箱">
              <el-input v-model="emailSettings.fromEmail" placeholder="请输入发件人邮箱" />
            </el-form-item>
            
            <el-form-item label="发件人密码">
              <el-input 
                v-model="emailSettings.fromPassword" 
                type="password" 
                placeholder="请输入邮箱密码或授权码"
                show-password
              />
            </el-form-item>
            
            <el-form-item label="启用SSL">
              <el-switch v-model="emailSettings.enableSsl" />
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveEmailSettings">保存设置</el-button>
              <el-button @click="testEmail">测试邮件</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 短信设置 -->
        <el-tab-pane label="短信设置" name="sms">
          <el-form :model="smsSettings" label-width="120px" class="settings-form">
            <el-form-item label="短信平台">
              <el-select v-model="smsSettings.provider" placeholder="请选择短信平台">
                <el-option label="阿里云" value="aliyun" />
                <el-option label="腾讯云" value="tencent" />
                <el-option label="华为云" value="huawei" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="AccessKey ID">
              <el-input v-model="smsSettings.accessKeyId" placeholder="请输入AccessKey ID" />
            </el-form-item>
            
            <el-form-item label="AccessKey Secret">
              <el-input 
                v-model="smsSettings.accessKeySecret" 
                type="password" 
                placeholder="请输入AccessKey Secret"
                show-password
              />
            </el-form-item>
            
            <el-form-item label="短信签名">
              <el-input v-model="smsSettings.signName" placeholder="请输入短信签名" />
            </el-form-item>
            
            <el-form-item label="验证码模板">
              <el-input v-model="smsSettings.codeTemplate" placeholder="请输入验证码模板ID" />
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveSmsSettings">保存设置</el-button>
              <el-button @click="testSms">测试短信</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 文件存储设置 -->
        <el-tab-pane label="存储设置" name="storage">
          <el-form :model="storageSettings" label-width="120px" class="settings-form">
            <el-form-item label="存储方式">
              <el-radio-group v-model="storageSettings.type">
                <el-radio label="local">本地存储</el-radio>
                <el-radio label="oss">阿里云OSS</el-radio>
                <el-radio label="cos">腾讯云COS</el-radio>
              </el-radio-group>
            </el-form-item>
            
            <template v-if="storageSettings.type !== 'local'">
              <el-form-item label="存储区域">
                <el-input v-model="storageSettings.region" placeholder="请输入存储区域" />
              </el-form-item>
              
              <el-form-item label="Bucket名称">
                <el-input v-model="storageSettings.bucket" placeholder="请输入Bucket名称" />
              </el-form-item>
              
              <el-form-item label="Access Key">
                <el-input v-model="storageSettings.accessKey" placeholder="请输入Access Key" />
              </el-form-item>
              
              <el-form-item label="Secret Key">
                <el-input 
                  v-model="storageSettings.secretKey" 
                  type="password" 
                  placeholder="请输入Secret Key"
                  show-password
                />
              </el-form-item>
              
              <el-form-item label="访问域名">
                <el-input v-model="storageSettings.domain" placeholder="请输入自定义域名（可选）" />
              </el-form-item>
            </template>
            
            <el-form-item label="文件大小限制">
              <el-input v-model="storageSettings.maxSize" placeholder="单位：MB">
                <template #append>MB</template>
              </el-input>
            </el-form-item>
            
            <el-form-item label="允许的文件类型">
              <el-input 
                v-model="storageSettings.allowedTypes" 
                placeholder="例如：jpg,png,gif,pdf"
              />
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveStorageSettings">保存设置</el-button>
              <el-button @click="testStorage">测试连接</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 安全设置 -->
        <el-tab-pane label="安全设置" name="security">
          <el-form :model="securitySettings" label-width="120px" class="settings-form">
            <el-form-item label="登录过期时间">
              <el-input v-model="securitySettings.sessionTimeout" placeholder="单位：小时">
                <template #append>小时</template>
              </el-input>
            </el-form-item>
            
            <el-form-item label="密码复杂度">
              <el-checkbox-group v-model="securitySettings.passwordRules">
                <el-checkbox label="length">至少8位字符</el-checkbox>
                <el-checkbox label="uppercase">包含大写字母</el-checkbox>
                <el-checkbox label="lowercase">包含小写字母</el-checkbox>
                <el-checkbox label="number">包含数字</el-checkbox>
                <el-checkbox label="special">包含特殊字符</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            
            <el-form-item label="登录失败限制">
              <el-input v-model="securitySettings.maxFailAttempts" placeholder="最大失败次数">
                <template #append>次</template>
              </el-input>
            </el-form-item>
            
            <el-form-item label="账户锁定时间">
              <el-input v-model="securitySettings.lockoutTime" placeholder="单位：分钟">
                <template #append>分钟</template>
              </el-input>
            </el-form-item>
            
            <el-form-item label="启用验证码">
              <el-switch v-model="securitySettings.enableCaptcha" />
            </el-form-item>
            
            <el-form-item label="IP白名单">
              <el-input 
                v-model="securitySettings.ipWhitelist" 
                type="textarea" 
                :rows="3"
                placeholder="每行一个IP地址或IP段，例如：192.168.1.1 或 192.168.1.0/24"
              />
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveSecuritySettings">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 系统日志 -->
        <el-tab-pane label="系统日志" name="logs">
          <div class="log-toolbar">
            <el-form :inline="true">
              <el-form-item label="日志级别">
                <el-select v-model="logFilter.level" placeholder="请选择" clearable>
                  <el-option label="全部" value="" />
                  <el-option label="错误" value="error" />
                  <el-option label="警告" value="warning" />
                  <el-option label="信息" value="info" />
                  <el-option label="调试" value="debug" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="时间范围">
                <el-date-picker
                  v-model="logFilter.dateRange"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="loadLogs">查询</el-button>
                <el-button @click="clearLogs">清空日志</el-button>
                <el-button @click="exportLogs">导出日志</el-button>
              </el-form-item>
            </el-form>
          </div>
          
          <el-table :data="logList" max-height="400" border>
            <el-table-column prop="time" label="时间" width="160" />
            <el-table-column prop="level" label="级别" width="80">
              <template #default="{ row }">
                <el-tag 
                  :type="getLogLevelType(row.level)"
                  size="small"
                >
                  {{ getLogLevelText(row.level) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="module" label="模块" width="100" />
            <el-table-column prop="message" label="日志内容" />
            <el-table-column prop="ip" label="IP地址" width="120" />
          </el-table>
          
          <div class="pagination">
            <el-pagination
              v-model:current-page="logPagination.page"
              v-model:page-size="logPagination.size"
              :page-sizes="[20, 50, 100]"
              :total="logPagination.total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleLogSizeChange"
              @current-change="handleLogCurrentChange"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'SystemSettings',
  setup() {
    const activeTab = ref('basic')
    
    // 基本设置
    const basicSettings = reactive({
      systemName: '场馆预订管理系统',
      systemDescription: '专业的场馆预订和管理平台',
      systemStatus: true,
      maintenanceNotice: '系统正在维护中，预计维护时间：30分钟',
      servicePhone: '400-123-4567',
      serviceEmail: 'service@venue.com'
    })
    
    // 邮件设置
    const emailSettings = reactive({
      smtpHost: 'smtp.qq.com',
      smtpPort: '587',
      fromEmail: '',
      fromPassword: '',
      enableSsl: true
    })
    
    // 短信设置
    const smsSettings = reactive({
      provider: 'aliyun',
      accessKeyId: '',
      accessKeySecret: '',
      signName: '',
      codeTemplate: ''
    })
    
    // 存储设置
    const storageSettings = reactive({
      type: 'local',
      region: '',
      bucket: '',
      accessKey: '',
      secretKey: '',
      domain: '',
      maxSize: '10',
      allowedTypes: 'jpg,png,gif,pdf,doc,docx'
    })
    
    // 安全设置
    const securitySettings = reactive({
      sessionTimeout: '24',
      passwordRules: ['length', 'number'],
      maxFailAttempts: '5',
      lockoutTime: '30',
      enableCaptcha: true,
      ipWhitelist: ''
    })
    
    // 日志相关
    const logFilter = reactive({
      level: '',
      dateRange: null
    })
    
    const logPagination = reactive({
      page: 1,
      size: 20,
      total: 0
    })
    
    const logList = ref([
      {
        time: '2024-01-15 16:30:00',
        level: 'info',
        module: '用户管理',
        message: '用户登录成功',
        ip: '192.168.1.100'
      },
      {
        time: '2024-01-15 16:25:00',
        level: 'warning',
        module: '订单管理',
        message: '订单支付超时',
        ip: '192.168.1.101'
      },
      {
        time: '2024-01-15 16:20:00',
        level: 'error',
        module: '支付管理',
        message: '支付接口调用失败',
        ip: '192.168.1.102'
      }
    ])
    
    // 加载数据
    const loadSettings = async () => {
      try {
        // 这里调用API加载各种设置
        console.log('加载系统设置')
      } catch (error) {
        ElMessage.error('加载设置失败')
      }
    }
    
    // 保存基本设置
    const saveBasicSettings = async () => {
      try {
        // 这里调用API保存基本设置
        ElMessage.success('基本设置保存成功')
      } catch (error) {
        ElMessage.error('保存失败')
      }
    }
    
    // 保存邮件设置
    const saveEmailSettings = async () => {
      try {
        // 这里调用API保存邮件设置
        ElMessage.success('邮件设置保存成功')
      } catch (error) {
        ElMessage.error('保存失败')
      }
    }
    
    // 测试邮件
    const testEmail = async () => {
      try {
        // 这里调用API测试邮件发送
        ElMessage.success('测试邮件发送成功')
      } catch (error) {
        ElMessage.error('测试邮件发送失败')
      }
    }
    
    // 保存短信设置
    const saveSmsSettings = async () => {
      try {
        // 这里调用API保存短信设置
        ElMessage.success('短信设置保存成功')
      } catch (error) {
        ElMessage.error('保存失败')
      }
    }
    
    // 测试短信
    const testSms = async () => {
      try {
        // 这里调用API测试短信发送
        ElMessage.success('测试短信发送成功')
      } catch (error) {
        ElMessage.error('测试短信发送失败')
      }
    }
    
    // 保存存储设置
    const saveStorageSettings = async () => {
      try {
        // 这里调用API保存存储设置
        ElMessage.success('存储设置保存成功')
      } catch (error) {
        ElMessage.error('保存失败')
      }
    }
    
    // 测试存储连接
    const testStorage = async () => {
      try {
        // 这里调用API测试存储连接
        ElMessage.success('存储连接测试成功')
      } catch (error) {
        ElMessage.error('存储连接测试失败')
      }
    }
    
    // 保存安全设置
    const saveSecuritySettings = async () => {
      try {
        // 这里调用API保存安全设置
        ElMessage.success('安全设置保存成功')
      } catch (error) {
        ElMessage.error('保存失败')
      }
    }
    
    // 加载日志
    const loadLogs = async () => {
      try {
        // 这里调用API加载系统日志
        console.log('加载系统日志')
        logPagination.total = logList.value.length
      } catch (error) {
        ElMessage.error('加载日志失败')
      }
    }
    
    // 清空日志
    const clearLogs = async () => {
      try {
        await ElMessageBox.confirm('确认要清空所有日志吗？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        // 这里调用API清空日志
        ElMessage.success('日志清空成功')
        loadLogs()
      } catch (error) {
        console.log('取消清空')
      }
    }
    
    // 导出日志
    const exportLogs = () => {
      // 这里实现导出日志功能
      ElMessage.success('日志导出成功')
    }
    
    // 获取日志级别类型
    const getLogLevelType = (level) => {
      const typeMap = {
        error: 'danger',
        warning: 'warning',
        info: 'primary',
        debug: 'info'
      }
      return typeMap[level] || 'info'
    }
    
    // 获取日志级别文本
    const getLogLevelText = (level) => {
      const textMap = {
        error: '错误',
        warning: '警告',
        info: '信息',
        debug: '调试'
      }
      return textMap[level] || level
    }
    
    // 日志分页处理
    const handleLogSizeChange = (size) => {
      logPagination.size = size
      loadLogs()
    }
    
    const handleLogCurrentChange = (page) => {
      logPagination.page = page
      loadLogs()
    }
    
    onMounted(() => {
      loadSettings()
      loadLogs()
    })
    
    return {
      activeTab,
      basicSettings,
      emailSettings,
      smsSettings,
      storageSettings,
      securitySettings,
      logFilter,
      logPagination,
      logList,
      saveBasicSettings,
      saveEmailSettings,
      testEmail,
      saveSmsSettings,
      testSms,
      saveStorageSettings,
      testStorage,
      saveSecuritySettings,
      loadLogs,
      clearLogs,
      exportLogs,
      getLogLevelType,
      getLogLevelText,
      handleLogSizeChange,
      handleLogCurrentChange
    }
  }
}
</script>

<style lang="scss" scoped>
.system-settings {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
  
  h2 {
    color: var(--text-color-primary);
    font-weight: 500;
  }
}

.settings-card {
  :deep(.el-tabs__content) {
    padding: 20px;
  }
}

.settings-form {
  max-width: 600px;
  
  .el-form-item {
    margin-bottom: 20px;
  }
}

.log-toolbar {
  margin-bottom: 20px;
  padding: 15px;
  background-color: var(--el-bg-color-page);
  border-radius: 6px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style> 